<template>
  <div style="padding: 20px">
    <Row style="margin-top: 200px">
      <Col span="10" offset="7">
        <Card style="padding: 20px">
          <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
            <Form-item label="账号" prop="username">
              <Input type="text" v-model="formCustom.username">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
              </Input>
            </Form-item>
            <Form-item label="密码" prop="password">
              <Input type="password" v-model="formCustom.password">
                <Icon type="ios-locked-outline" slot="prepend"></Icon>
              </Input>
            </Form-item>
            <Form-item>
              <Button type="primary" @click="handleSubmit('formCustom')">提交</Button>
              <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>
            </Form-item>
          </Form>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
export default {
  name: 'login',
  data () {
    const validateUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      formCustom: {
        username: '',
        password: ''
      },
      ruleCustom: {
        username: [
            { validator: validateUsername, trigger: 'blur' }
        ],
        password: [
            { validator: validatePassword, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('提交成功!')
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>

<style>
  body {
    background: #eee;
  }
</style>
